<%-- 
    Document   : vacancy
    Created on : Feb 10, 2012, 11:16:51 PM
    Author     : SonLT
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<sql:setDataSource  var="SachDS" driver="${initParam.driver}" url="${initParam.url}" user="${initParam.user}" password="${initParam.password}" scope="request" />
<html>
    <head>
        <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
        <link rel="stylesheet" type="text/css" href="./css/webstarter.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.17.custom.css" />
        <link rel="stylesheet" type="text/css" href="./css/superfish.css" />
        <link rel="stylesheet" type="text/css" href="./css/jquery.wysiwyg.css" />
        <link rel="stylesheet" type="text/css" href="./css/fullcalendar.css" />

        <style type="text/css">
            input[type="text"]{border: 1px solid #aaaaaa; height: 21px;}
            input[type="text"]:focus{background: #ffc;}
            input[type="password"]{border: 1px solid #aaaaaa; height: 21px;}
            input[type="password"]:focus{background: #ffc;}
        </style>

        <link rel="stylesheet" type="text/css" href="css/style.css" />

        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
        <script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script>
        <script type="text/javascript" src="js/tablesorter.js"></script>
        <script type="text/javascript" src="js/tablesorter_filter.js"></script>

        <script type="text/javascript">
            function confirmDelete(){
                if(confirm("Do you want to delete this vacancy ?") == true){
                    return true;
                }
                return false;
            }

            jQuery(document).ready(function(){
                $("#tbEmp").tablesorter({debug:false, widgets: ['zebra'], sortList: [[0,0]]})
                .tablesorterPager({container: $("#pager")})
                .tablesorterFilter({filterContainer: $("#filter-box"),
                    filterClearContainer: $("#filter-clear-button"),
                    filterColumns: [0],
                    filterCaseSensitive: false
                });
            });

        </script>

    </head>
    <body>
        <jsp:include page="include/header.jsp"/>
        <div id="content">
            <h2 align="center" style="color:#005CA2;">Vacancy Management</h2>
            <div class="dataGrid">

                <div class="dataGridControl">
                    <div class="dataGridControlButtons">
                        <img src="./img/add.png" alt="New" /> <a href="vacancy_insert.jsp" id="create-new">New record</a>
                    </div>

                    <div class="dataGridPages">
                        <form action="searchVacancy.do" method="post">
                            Keywords: <input type="text" name="txtSearch" style="width: 180px;">
                            by:
                            <select name="cbo">
                                <option value="Title">Title</option>
                                <option value="Experience">Experience</option>
                            </select>

                            <input type="submit" value="Search"/>
                        </form>
                    </div>

                    <div class="clear"></div>
                </div>

                <table id="tbEmp">
                    <thead>
                        <tr>
                            <th>VacancyTitle</th>
                            <th>NumOfJob</th>
                            <th>Salary</th>
                            <th>Experience</th>
                            <th>Start Date</th>
                            <th>Close Date</th>
                            <th>Status</th>
                            <th>&nbsp;</th>
                            <th>&nbsp;</th>
                        </tr>
                    </thead>

                    <tbody>
                        <jsp:useBean id="vac" class="model.VacancyModel"/>
                        <c:forEach var="v" items="${vac.allVacancy}">
                            <tr class="highlight" style="border: 1px solid #aaaaaa;">

                                <td>${v.vacancyTitle}</td>
                                <td>${v.numOfJob}</td>
                                <td>${v.salary}</td>
                                <td>${v.experience}</td>
                                <td>${v.startDate}</td>
                                <td>${v.closeDate}</td>
                                <td>${v.status}</td>
                                <td><a href="showUpdateVacancy.do?vacancyID=${v.vacancyID}"><img src="./img/pencil.png" alt="Edit" />edit</a></td>
                                <td><a href="deleteVacancy.do?vacancyID=${v.vacancyID}" onclick="return confirmDelete();"><img src="./img/delete.png" alt="Delete" />delete</a></td>
                            </tr>
                        </c:forEach>
                    </tbody>

                </table>

                <div id="pager" class="pager" align="center" style="color:#005CA2;font-weight:bolder;font-size:13px; margin-top: 20px;">
                    <form>
                        Page:
                        <input type="button" value="" class="first" style="background-image: url(./img/resultset_first.png); background-color: white; width: 20px;"/>
                        <input type="button" value="" class="prev" style="background-image: url(./img/resultset_previous.png); background-color: white; width: 20px;"/>
                        <input type="text" class="pagedisplay" readonly="true" style="width: 30px; height: 17px;"/>
                        <input type="button" value="" class="next" style="background-image: url(./img/resultset_next.png); background-color: white; width: 20px;"/>
                        <input type="button" value="" class="last" style="background-image: url(./img/resultset_last.png); background-color: white; width: 20px;"/>
                        Items per page:
                        <select class="pagesize">
                            <option value="5">5</option>
                            <option value="10" selected="selected">10</option>
                        </select>
                    </form>
                </div>

                <div class="dataGridControl">

                    <div class="dataGridPages" style="display: none;">
                        Page: <img src="./img/resultset_first.png" alt="First" /> <img src="./img/resultset_previous.png" alt="Previous" /> <select name="pageBottom"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select> <img src="./img/resultset_next.png" alt="Next" /> <img src="./img/resultset_last.png" alt="Last" />&nbsp; Items per page: <select name="perPageBottom"><option value="25">25</option><option value="50">50</option><option value="100">100</option></select>
                    </div>

                    <div class="clear"></div>
                </div>

            </div>

        </div><!-- END OF #content -->
        <jsp:include page="include/footer.jsp"/>
    </body>
</html>